<template>
    <div :class="bgcolor == 'light' ? 'TimeLine2-light' : 'TimeLine2-dark'">
      <div class="LeftBox">
        <el-slider v-model="value" :step="1" show-stops :show-tooltip="false" :min="minValue" :max="maxValue"
          :marks="marks" @change="handleTimeLineChange" v-if="timeSet.length" />
      </div>
      <div class="RightBox">
        <el-tooltip class="box-item" effect="light" content="上一页" placement="top">
          <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" @click.native="handlePrePage"
            class="el-icon-d-arrow-left  icon-size">
          </el-icon>
        </el-tooltip>
   
        <el-tooltip class="box-item" effect="light" content="播放/暂停" placement="top">
          <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" v-if="playSwitch"
            class="el-icon-video-pause icon-size" @click.native="handlePlay">
          </el-icon>
          <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" v-if="!playSwitch"
            class="el-icon-video-play icon-size" @click.native="handlePlay">
   
          </el-icon>
        </el-tooltip>
   
        <el-tooltip class="box-item" effect="light" content="下一页" placement="top">
          <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" @click.native="handleNextPage"
            class="el-icon-d-arrow-right  icon-size">
          </el-icon>
        </el-tooltip>
      </div>
      <div class="skin-control">
        <el-icon :color="bgcolor == 'light' ? '#4a0987' : 'white'" size="30px" @click.native="skinControlSwitch"
          class="el-icon-s-opportunity" :class="bgcolor == 'light' ? 'skin-control-light' : 'skin-control-dark'">
        </el-icon>
      </div>
    </div>
   
   
  </template>
  <script>
   
  export default {
    data() {
      return {
        //--start-#定义时间定时器指引#-->
        timer: null,
        //--start-#时间轴页面容量#-->
        pageSize: 12,
        //--start-#时间轴页面数#-->
        pageCode: 1,
        //--start-#时间轴初始化显示的位置（0-11）#-->
        value: 0,
        //--start-#时间轴最小值#-->
        minValue: 0,
        //--start-#时间轴最大值#-->
        maxValue: 0,
        //--start-#遮罩，element公司提供的技术接口#-->
        marks: {},
        //--start-#播放按键转换#-->
        playSwitch: false,
        //--start-#时间集合12节点为一组#-->
        time12ArrNode: [],
        zeroTimeNode: undefined,
        startZero: true,
        bgcolor: "light"
      }
    },
    props: {
   
      //--start-#父组件时间轴展示标题#-->
      timeYMD: {
        type: String,
        default: '',
      },
      //--start-#时间节点集合#-->
      timeSet: {
        type: Array,
        default: [],
      },
      //--start-#播放时的时间间隔#-->
      second: {
        type: Number,
        default: 1000,
      },
    },
    mounted() { },
    computed: {},
    methods: {
      //--start-#处理皮肤空间切换#-->
      skinControlSwitch() {
        if (this.bgcolor === "dark")
          this.bgcolor = "light"
        else if (this.bgcolor === "light")
          this.bgcolor = "dark"
      },
      //--start-#处理时间轴点击事件#-->
      handleTimeLineChange(val) {
        if (this.time12ArrNode[val] === "00:00:00") {
          this.zeroTimeNode = "00:00:00";
          this.$emit("handleNowValueChange", "nextDayAndZero", "00:00:00");
        }
        else {
          if (this.zeroTimeNode === "00:00:00") {
            this.zeroTimeNode = undefined;
            this.$emit("handleNowValueChange", "preDayAndZero", this.time12ArrNode[val]);
          }
          else {
            this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[val]);
          }
        }
      },
      //--start-#处理播放是与否#-->
      handlePlay() {
        this.playSwitch = !this.playSwitch;
      },
      computeTime12ArrNode() {
        this.time12ArrNode = Array.from(this.timeSet).slice(
          (this.pageCode - 1) * this.pageSize,
          this.pageCode * this.pageSize
        );
      },
      //--start-#处理上一页#-->
      handlePrePage() {
        //console.log(this.zeroTimeNode);
        this.startZero = false;
        if (this.pageCode === 1) {
   
          this.pageCode = Math.ceil(this.timeSet.length / this.pageSize)
          this.value = 0;
          this.computeTime12ArrNode();
          this.$emit("handleNowValueChange", "preDay", "22:10:00");
   
        }
        else if (this.pageCode > 1 && !this.zeroTimeNode) {
   
          this.pageCode--;
          this.value = 0;
          this.computeTime12ArrNode();
          this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[0]);
          if (this.time12ArrNode[0] == "00:10:00") {
            this.startZero = true;
          }
        }
        else if (this.pageCode === Math.ceil(this.timeSet.length / this.pageSize) && this.zeroTimeNode === "00:00:00") {
   
          // this.zeroTimeNode = undefined;
          this.pageCode--;
          this.value = 0;
          this.computeTime12ArrNode();
          this.$emit("handleNowValueChange", "preDay", "20:10:00");
        }
        this.zeroTimeNode = undefined;
        // console.log("@@", this.zeroTimeNode);
      },
      //--start-#处理下一页#-->
      handleNextPage() {
        this.startZero = false;
        //console.log(this.zeroTimeNode);
        if (this.pageCode === Math.ceil(this.timeSet.length / this.pageSize) && this.zeroTimeNode === "00:00:00") {
          this.pageCode = 1;
          this.value = 0;
          this.computeTime12ArrNode();
          this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[0]);
          this.startZero = true;
        }
        else if (this.pageCode === Math.ceil(this.timeSet.length / this.pageSize)) {
          this.pageCode = 1;
          this.value = 0;
          this.computeTime12ArrNode();
          this.$emit("handleNowValueChange", "nextDay", "00:10:00");
        }
        else if (this.pageCode < Math.ceil(this.timeSet.length / this.pageSize)) {
          this.pageCode++;
          this.value = 0;
          this.computeTime12ArrNode();
          this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[0]);
        }
        this.zeroTimeNode === undefined;
      },
      handlePalyNextPage() {
        this.pageCode++;
        this.value = 0;
        this.computeTime12ArrNode();
        this.zeroTimeNode = undefined;
      }
    },
    //--start-#监视时间轴#-->
    watch: {
      timeYMD(newVal, oldVal) {
        if (this.playSwitch)
          this.playSwitch = !this.playSwitch;
      },
      timeSet(newVal, oldVal) {
        this.time12ArrNode = Array.from(newVal).slice(
          (this.pageCode - 1) * this.pageSize,
          this.pageCode * this.pageSize
        );
      },
      time12ArrNode(newVal, oldVal) {
        let obj = {};
        this.time12ArrNode.forEach((item, index) => {
          obj[index * 1] = item;
        });
        this.marks = obj;
        this.maxValue = this.time12ArrNode.length - 1;
      },
      //--start-#深度监视#-->
      deep: true,
      playSwitch(newVal, oldVal) {
        if (newVal) {
          this.timer = setInterval(() => {
            if (this.value < this.maxValue) {
   
              //--start-#判断是不是一天的第一个节点，即00:10:00#-->
              if (this.value === 0 && this.startZero) {
                this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[Math.floor(this.value)]);
                this.startZero = false;
              }
              else {
                this.value++;
                //--start-#判断是不是一天的最后一个节点，即00:00:00#-->
                if (this.time12ArrNode[Math.floor(this.value)] === "00:00:00") {
                  this.$emit("handleNowValueChange", "nextDayAndZero", "00:00:00");
                  this.zeroTimeNode = "00:00:00";
                  this.playSwitch = !this.playSwitch;
                }
                //--start-#正常范围内增长值#-->
                else {
                  this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[Math.floor(this.value)]);
                }
              }
            }
            //--start-#判断是不是每页12个时间节点的最后一个执行完毕，调用下一页生成#-->
            else if (this.value === this.maxValue && this.pageCode < Math.ceil(this.timeSet.length / this.pageSize)) {
              this.handlePalyNextPage();
              this.$emit("handleNowValueChange", this.timeYMD, this.time12ArrNode[Math.floor(this.value)]);
            }
            //console.log("@2", this.value, this.maxValue, this.time12ArrNode[Math.floor(this.value)]);
          }, this.second);
        } else {
          if (this.timer) {
            clearInterval(this.timer);
          }
        }
      }
   
    }
  }
  </script>
   
  <style lang="less" scoped>
  .TimeLine2-light {
    user-select: none;
    width: 100%;
    height: 100%;
   
    border: 2px solid slateblue;
    border-radius: 10px;
   
    background-color: rgba(255, 255, 255, 0.5);
   
    backdrop-filter: blur(10px);
   
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    .LeftBox {
      width: 80%;
      height: 100;
   
      padding: 0px 30px;
   
      ::v-deep .el-slider__runway {
   
        background-color: #cccccc88;
      }
   
      ::v-deep .el-slider__button {
        width: 10px;
        height: 10px;
        background-color: transparent;
        border: none;
      }
   
      ::v-deep .el-slider__stop {
        width: 1px;
        height: 12px;
        background-color: #4a0987;
        z-index: 999;
        display: block;
      }
   
      ::v-deep .el-slider__marks-text {
        color: #4a0987;
      }
    }
   
    .RightBox {
      width: 20%;
      height: 100;
   
      display: flex;
      justify-content: space-around;
      align-items: center;
   
   
    }
   
  }
   
  .skin-control {
    position: absolute;
    top: 5px;
    right: 5px;
   
  }
   
  .skin-control-light {
    color: rgba(248, 17, 17, 0.5);
  }
   
  .skin-control-dark {
    color: rgba(12, 35, 241, 0.5);
  }
   
  .icon-size {
    font-size: 20px;
  }
   
  .TimeLine2-dark {
    user-select: none;
    width: 100%;
    height: 100%;
   
    border: 2px solid white;
    border-radius: 10px;
   
    background-color: rgba(41, 5, 75, .5);
   
    backdrop-filter: blur(10px);
   
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    .LeftBox {
      width: 80%;
      height: 100;
   
      padding: 0px 30px;
   
      ::v-deep .el-slider__runway {
   
        background-color: #fff3;
      }
   
      ::v-deep .el-slider__button {
        width: 10px;
        height: 10px;
        background-color: transparent;
        border: none;
      }
   
      ::v-deep .el-slider__stop {
        width: 1px;
        height: 12px;
        background-color: white;
        z-index: 999;
        display: block;
      }
   
      ::v-deep .el-slider__marks-text {
        color: white;
      }
    }
   
    .RightBox {
      width: 20%;
      height: 100;
   
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  </style>